<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Button Static Test : Default</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css"
	type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css"
	type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.8.2.js"></script>
<script type="text/javascript" src="../static.js"></script>
<style>
div {
	margin: 0 0 1em;
}

h2 {
	margin: 2em 0 1em;
}
</style>
</head>
<body>

	<h2>Using button elements</h2>

	<div>
		<button
			class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Button</span>
		</button>

		<button
			class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all"
			title="Button">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
				class="ui-button-text">Primary icon</span>
		</button>

		<button
			class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all"
			title="Button">
			<span class="ui-button-text">Secondary icon</span> <span
				class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</button>

		<button
			class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
				class="ui-button-text">Primary icon</span>
		</button>

		<button
			class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Secondary icon</span> <span
				class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</button>

		<button
			class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
				class="ui-button-text">Both icons</span> <span
				class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</button>

		<button
			class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
				class="ui-button-text">No text</span> <span
				class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</button>
	</div>

	<h2>Using anchor elements</h2>

	<div>
		<a href="#"
			class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Button</span>
		</a> <a href="#"
			class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all"
			title="Button"> <span
			class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">Primary icon</span>
		</a> <a href="#"
			class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all"
			title="Button"> <span class="ui-button-text">Secondary
				icon</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</a> <a href="#"
			class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">Primary icon</span>
		</a> <a href="#"
			class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Secondary icon</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</a> <a href="#"
			class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">Both icons</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</a> <a href="#"
			class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">No text</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</a>
	</div>



	<h2>Using label elements (used when proxying to radio or check
		inputs)</h2>

	<div>
		<label
			class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Button</span>
		</label> <label
			class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all"
			title="Button"> <span
			class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">Primary icon</span>
		</label> <label
			class="ui-button ui-button-icon-only ui-widget ui-state-default ui-corner-all"
			title="Button"> <span class="ui-button-text">Secondary
				icon</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</label> <label
			class="ui-button ui-button-text-icon-primary ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">Primary icon</span>
		</label> <label
			class="ui-button ui-button-text-icon-secondary ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Secondary icon</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</label> <label
			class="ui-button ui-button-text-icons ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">Both icons</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</label> <label
			class="ui-button ui-button-icons-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span> <span
			class="ui-button-text">No text</span> <span
			class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>
		</label>
	</div>


	<h2>Button Sets</h2>

	<div class="ui-buttonset">
		<button
			class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-left">
			<span class="ui-button-text">First</span>
		</button>
		<button
			class="ui-button ui-button-text-only ui-widget ui-state-default">
			<span class="ui-button-text">Middle</span>
		</button>
		<button
			class="ui-button ui-button-text-only ui-widget ui-state-default">
			<span class="ui-button-text">Middle</span>
		</button>
		<button
			class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-right">
			<span class="ui-button-text">Last</span>
		</button>
	</div>



	<script type="text/javascript"
		src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
	<script>
	$('<div/>').css({
		position: "absolute",
		right: 10,
		top: 10
	}).appendTo(document.body).themeswitcher();
</script>
</body>
</html>
